<template>

  <div class="limit">
    <mt-header fixed title="额度记录">
      <router-link to="/my" slot="left"><mt-button icon="back"></mt-button></router-link>
    </mt-header>
    <div class="cont">
      <div class="tab">
        <div class="item all" @click="allHandel">
          全部
        </div>
        <div class="item start" @click="getpopupStart">
          <span v-if="startVals=='开始时间'||!startVals"> {{startVals}}▼</span>
          <span v-else> {{startVals}} ▲</span>
        </div>
        <div class="item end" @click="getpopupEnd">
          <span v-if="endVals=='结束时间'||!endVals"> {{endVals}} ▼</span>
          <span v-else> {{endVals}}▲</span>

        </div>
      </div>
      <div class="timeline">
        时间段:2020-01-01~2024-07-29
      </div>
      <div class="content">
        <div>
          <accordion :items="items"></accordion>
        </div>
      </div>
    </div>
    <mt-datetime-picker ref="pickerStart" v-model="popupStart" type="date" year-format="{value}" month-format="{value}"
      date-format="{value}" @confirm="startConfirm">

    </mt-datetime-picker>

    <mt-datetime-picker ref="pickerEnd" v-model="popupEnd" type="date" year-format="{value}" month-format="{value}"
      date-format="{value}" @confirm="endConfirm">
    </mt-datetime-picker>
  </div>
</template>

<script>
  import Accordion from './Accordion.vue';
  export default {
    name: 'limit',
    components: {
      Accordion
    },
    data() {
      return {
        popupEnd: '',
        popupStart: '',
        startVals: '开始时间',
        endVals: '结束时间',
        date1: '',
        items: [{
            title: '额度变更',
            time: '2024-07-26 09:58:09',
            change: '-309575  ',
            total: '0'
          },
          {
            title: ' 服务费',
            time: '2024-07-26 09:58:09',
            change: '-525',
            total: '309575'
          },
          {
            title: '额度变更(补仓)',
            time: '2024-07-26 09:58:09',
            change: '-500',
            total: '100'
          },
          {
            title: '额度变更',
            time: '2024-07-26 09:58:09',
            change: '454',
            total: '98989'
          },
          {
            title: '额度变更',
            time: '2024-07-26 09:58:09',
            change: '66',
            total: '5656'
          }
        ]
      };
    },

    created: function() {},
    watch: {

    },
    mounted() {

    },
    methods: {
      allHandel() {
        this.startVals = '开始时间';
        this.endVals = '结束时间';
      },
      getpopupStart() {
        this.$refs.pickerStart.open();
        this.date1 = '';
      },
      getpopupEnd() {
        this.$refs.pickerEnd.open();
      },
      startConfirm(date) {
        // console.log(date)
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        // var hour = date.getHours();
        // var min = date.getMinutes();
        // var sec = date.getSeconds();
        month = month >= 10 ? month : ("0" + month);
        day = day >= 10 ? day : ("0" + day);
        // hour = hour >= 10 ? hour : ("0" + hour);
        // min = min >= 10 ? min : ("0" + min);
        // sec = sec >= 10 ? sec : ("0" + sec);
        this.startVals = year + "-" + month + "-" + day;
        this.date1 = date;
      },
      endConfirm(date) {
        // this.param.selectedValue = this.endVals;
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        // var hour = date.getHours();
        // var min = date.getMinutes();
        // var sec = date.getSeconds();
        month = month >= 10 ? month : ("0" + month);
        day = day >= 10 ? day : ("0" + day);
        // hour = hour >= 10 ? hour : ("0" + hour);
        // min = min >= 10 ? min : ("0" + min);
        // sec = sec >= 10 ? sec : ("0" + sec);
        this.endVals = year + "-" + month + "-" + day


        var date1 = this.date1.getTime();
        var date2 = date.getTime();
        if (date2 - date1 <= 0) {
          this.$layer.msg('结束时间必须大于开始时间');
          this.endVals = '结束时间'
        } else {
          this.endVals = year + "-" + month + "-" + day
        }

      },
    }

  };
</script>

<style scoped>
  .limit {
    background-color: #F7F7F7;
    width: 100%;
    min-height: 100vh;
  }

  .timeline {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #f5f5f5;
    font-size: 24px;
    color: #333;
    height: 80px;
    padding-left: 30px;
    font-weight: 900;
  }

  .mint-popup {
    width: 100%;
  }

  .picker-toolbar-title {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 1rem;
    line-height: 1rem;
    background: #f5f5f5;
  }

  .mint-header {
    background-color: #fff;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
  }

  .cont {
    margin-top: 120px;
    background-color: #fff;
  }

  .tab {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    padding: 0 35px 30px 35px;
  }

  .tab .item {
    width: calc(100% / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 900;
  }
</style>
